<!-- 排查任务配置-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :push="17" :span="5.5">
        <el-form :model="queryParams" size="small" :inline="true">
          <el-form-item prop="searchValue">
            <el-input v-model="queryParams.searchValue" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
            <!-- <el-button icon="el-icon-refresh" size="mini" @click="">重置</el-button> -->
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :push="17" :span="1.2">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd()"
          v-hasPermi="['system:task:add']">新增</el-button>
      </el-col>
      <el-col :push="17" :span="1.2">
        <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="handleUpdate()"
          v-hasPermi="['system:task:edit']">编辑</el-button>
      </el-col>
      <!-- <right-toolbar @queryTable="getList"></right-toolbar> -->
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="taskList" @selection-change="handleSelectionChange" @row-dblclick="showDetail" stripe
          style="width: 100%">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="managerMethodDto.eventDto.sUnit.riskUnitName" label="风险单元" align="center" width="180">
          </el-table-column>
          <el-table-column prop="managerMethodDto.hiddenDanger" label="隐患排查内容" align="center" width="300">
          </el-table-column>
          <el-table-column prop="userList" :formatter="userNameFormatter" label="排查人员" align="center" width="180">
            <template slot-scope="scope">
              <el-tag type="promise" v-for=" user in scope.row.userList" :key="user.userId">
                {{user.userName}}
              </el-tag>&nbsp;
            </template>
          </el-table-column>

          <el-table-column prop="pczq" label="排查周期" width="90">
          </el-table-column>
          <el-table-column prop="zqdw" label="周期单位" width="90">
          </el-table-column>
          <el-table-column prop="firstCheckTime" label="初始排查时间" width="240" align="center">
          </el-table-column>
          <el-table-column prop="status" label="任务状态" width="120" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 0">未指定</span>
              <span v-if="scope.row.status === 1">正常</span>
              <span v-if="scope.row.status === 2">暂停</span>
            </template>
          </el-table-column>
          <el-table-column prop="isChecked" label="排查结果" width="120" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 0">未排查</span>
              <span v-if="scope.row.status === 1">正常</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastCheckTime" label="最近排查时间" width="240" align="center">
          </el-table-column>
          <el-table-column prop="dailyStartTime" label="每日任务开始时间" width="240" align="center">
          </el-table-column>
          <el-table-column prop="dailyEndTime" label="每日任务结束时间" width="240" align="center">
          </el-table-column>
          <el-table-column prop="updateTime" label="编辑时间" width="240" align="center">
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['system:menu:edit']">修改</el-button>

              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                v-hasPermi="['system:menu:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <hr />
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete"
            v-hasPermi="['system:task:remove']">批量删除</el-button>
        </el-col>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="-> , sizes, prev, pager, next ,total" :total="total">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog :title="openTitle" width="40%" :visible.sync="open">
      <el-row style="border-radius: 0px">
        <el-col :span="24">

          <el-form :model="form" :rules="rules" ref="form">
            <el-row>
              <el-col :span="11">
                <el-form-item label="风险单元" prop="riskUnitName" :label-width="'140px'">
                  <el-input v-model="form.riskUnitName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-button circle icon="el-icon-search"></el-button>
                <!-- <span class="el-icon-search" @click="getUserList"></span> -->
              </el-col>
              <el-col :span="12">
                <el-form-item label="执行操作" :label-width="'140px'">
                  <el-button type="primary" @click="openManagerMethodWindow">隐患排查内容</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="隐患排查内容" prop="hiddenDanger" :label-width="'140px'">
                  <el-input v-model="form.hiddenDanger"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="排查人员" prop="userName" :label-width="'140px'">
                  <el-input v-model="form.userName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <el-button circle icon="el-icon-search" @click="openUserWindow"></el-button>
              </el-col>

            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="排查周期" prop="pczq" :label-width="'140px'">
                  <el-input v-model="form.pczq"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="周期单位" :label-width="'140px'">
                  <el-select v-model="form.zqdw" placeholder="请选择活动区域">
                    <el-option label="未指定" value="未指定"></el-option>
                    <el-option label="小时" value="小时"></el-option>
                    <el-option label="天" value="天"></el-option>
                    <el-option label="月" value="月"></el-option>
                    <el-option label="年" value="年"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="初始排查时间" :label-width="'140px'">
                  <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.firstCheckTime" type="datetime"
                    placeholder="选择日期时间" default-time="8:00:00">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务状态" :label-width="'140px'">
                  <el-select v-model="form.status" placeholder="请选择活动区域">
                    <el-option label="未指定" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="暂停" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="每日任务开始时间" :label-width="'140px'">
                  <el-date-picker v-model="form.dailyStartTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                    placeholder="选择日期时间" default-time="8:00:00">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="每日任务结束时间" :label-width="'140px'">
                  <el-date-picker v-model="form.dailyEndTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                    placeholder="选择日期时间" default-time="16:00:00">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="用户列表" width="80%" :visible.sync="userWindow">
      <el-table :data="userList" @selection-change="userHandleSelectionChange">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
        <el-table-column label="用户名称" align="center" key="userName" prop="userName" :show-overflow-tooltip="true" />
        <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
        <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" :show-overflow-tooltip="true" />
        <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" width="120" />
        <el-table-column label="状态" align="center" key="status">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
              @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userWindow = false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="管控方式列表" width="80%" :visible.sync="managerMethodWindow">
      <el-table :data="managerMethodList" stripe border height="550" style="font-size: 16px"
        :row-style="{height:'60px'}" @selection-change="managerHandleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="管控方式" prop="managerMethod" width="250" />
        <el-table-column label="管控措施分类1" prop="managerMethodTypeOne.typeName" :show-overflow-tooltip="true"
          width="230" />
        <el-table-column label="管控措施分类2" prop="managerMethodTypeTwo.typeName" :show-overflow-tooltip="true"
          width="230" />
        <el-table-column label="管控措施分类3" prop="thirdTypeDesc" :show-overflow-tooltip="true" width="230" />
        <el-table-column label="管控措施描述" prop="managerMethodDesc" :show-overflow-tooltip="true" width="400" />
        <el-table-column label="隐患排查内容" prop="hiddenDanger" :show-overflow-tooltip="true" width="400" />
        <el-table-column label="风险单元" prop="eventDto.sUnit.riskUnitName" :show-overflow-tooltip="true" width="280" />
        <el-table-column label="风险事件名称" prop="eventDto.eventName" :show-overflow-tooltip="true" width="270" />
        <el-table-column label="编辑时间" prop="updateTime" :show-overflow-tooltip="true" width="120" />

      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeManagermethodWindow">确 定</el-button>
      </div>
    </el-dialog>

    <el-drawer title="排查任务信息" size="50%" :visible.sync="openDetail" :before-close="handleClose">
      <el-row>
        <el-col :push="1" :span="22">
          <el-tabs v-model="activeName">
            <el-tab-pane label="排查任务信息" name="first">
              <el-row>
                <el-col :push="1" :span="20">
                  <el-descriptions v-if="openDetail" class="margin-top" :column="1">
                    <el-descriptions-item label="风险单元">
                      {{detailData.managerMethodDto.eventDto.sUnit.riskUnitName}}
                    </el-descriptions-item>
                    <el-descriptions-item label="隐患排查内容">
                      {{detailData.managerMethodDto.hiddenDanger}}
                    </el-descriptions-item>
                    <el-descriptions-item label="排查人员" labelStyle="{'text-align': 'center','height':'800px'}">
                      <template>
                        <el-tag type="promise" v-for=" user in this.detailData.userList" :key="user.userId">
                          {{user.userName}}
                        </el-tag>
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item label="排查周期">
                      {{detailData.pczq}}
                    </el-descriptions-item>
                    <el-descriptions-item label="周期单位">
                      {{detailData.zqdw}}
                    </el-descriptions-item>
                    <el-descriptions-item label="初始排查时间">
                      {{detailData.firstCheckTime}}
                    </el-descriptions-item>
                    <el-descriptions-item label="任务状态" :label-width="'140px'">
                      <span v-if="this.detailData.status === 0">未指定</span>
                      <span v-else-if="this.detailData.status === 1">正常</span>
                      <span v-else>暂停</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="每日任务开始时间">
                      {{detailData.dailyStartTime}}
                    </el-descriptions-item>
                    <el-descriptions-item label="每日任务结束时间">
                      {{detailData.dailyEndTime}}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>

            </el-tab-pane>
            <el-tab-pane label="排查任务记录" name="second">
              <el-descriptions title="排查任务记录">
                <el-descriptions-item>
                  <h1>暂无</h1>
                </el-descriptions-item>

              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>



    </el-drawer>


  </div>
</template>

<script>
import { listTask, getTask, delTask, addTask, updateTask, listTaskUser, listManagerMethod } from "@/api/system/task";
import Long from "@xtuc/long";




export default {
  name: "Task",
  data() {
    return {
      activeName: "first",
      openDetail: false,
      detailData: {},
      // 选中数组
      ids: [],
      userLists: [],
      taskList: [],
      userList: [],
      managerMethodList: [],
      //总条数
      total: 0,
      //当前页数
      currentPage: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //弹出层开关
      open: false,
      //弹出层标题
      openTitle: "",
      userWindow: false,
      userNames: [],
      managerMethodWindow: false,
      managerMethodIds: [],
      //form表单参数
      form: {
        managerMethodDto: [],
        zqdw: "未指定",
        status: "1",
        userName: undefined,
        userId: undefined,
        riskUnitName: "",
        hiddenDanger: "",
        userList: []
      },
      rules: {
        pczq: [
          { required: true, message: "排查周期不能为空", trigger: "blur" }
        ],
        hiddenDanger: [
          { required: true, message: "隐患排查内容不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    openManagerMethodWindow() {
      listManagerMethod().then(response => {
        console.info(response)
        this.managerMethodList = response.rows;
        this.managerMethodWindow = true;
      })
    },

    openUserWindow() {
      listTaskUser().then(response => {
        // console.info(response);
        this.userList = response.rows;
        this.userWindow = true;
      }
      );
    },
    getList(params) {
      params = this.queryParams;
      listTask(params).then(response => {
        // console.info(response);
        this.taskList = response.data.list;
        this.total = response.data.total;
        this.currentPage = response.data.pageNum;
      }
      );
    },
    handleAdd() {
      this.open = true;
      this.reset();
      this.openTitle = "新增排查任务"
    },
    handleUpdate(row) {
      if (row == undefined) {
        var taskId = this.ids[0]
        console.info(taskId)
        if (taskId == undefined) {

          this.$alert('请至少选择1条要编辑的数据', '提示', {
            confirmButtonText: '确定'
          });
          return
        }
      } else {
        taskId = row.taskId;
      }
      this.reset();
      getTask(taskId).then(response => {
        this.form = response.data;
        console.info(this.form)
        this.form.status = String(this.form.status)
        if (response.data.managerMethodDto.hiddenDanger != undefined) {
          this.$set(this.form, 'hiddenDanger', String(response.data.managerMethodDto.hiddenDanger))

        }
        if (response.data.managerMethodDto.eventDto != undefined) {
          if (response.data.managerMethodDto.eventDto.sUnit != undefined) {
            const riskUnitName = response.data.managerMethodDto.eventDto.sUnit.riskUnitName
              == undefined ? "" : String(response.data.managerMethodDto.eventDto.sUnit.riskUnitName)

            this.$set(this.form, 'riskUnitName', riskUnitName)
          }
        }

        let arr = []
        row.userList.forEach((item) => {
          arr.push(item.userName);
        });
        this.form.userName = String(arr.join(','))

        this.open = true;
        this.openTitle = "编辑排查任务"
      })
    },
    handleDelete(row) {
      const noticeIds = row.taskId || this.ids
      this.$modal.confirm('是否确认删除id为"' + noticeIds + '"的数据项？').then(function () {
        return delTask(noticeIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.status = Number(this.form.status)
          this.form.userId = Long(this.form.userId)
          if (this.form.taskId != undefined) {

            updateTask(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTask(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        pczq: undefined,
        zqdw: '未指定',
        firstCheckTime: undefined,
        status: "1",
        dailyStartTime: undefined,
        dailyEndTime: undefined
      };
      this.resetForm("form");
    },
    userNameFormatter(row) {
      console.info(row)
      let arr = []
      row.userList.forEach((item, index) => {
        arr.push(item.userName);
      })
      return String(arr.join(','))
    },
    showDetail(row) {
      this.openDetail = true;
      console.info(row);
      this.detailData = row;
    },

    //主页面表格
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.taskId)

      this.userLists = selection.map(item => item.userList)

    },
    //管控措施表格
    managerHandleSelectionChange(selection) {
      if (selection.length = 1) {
        this.managerMethodIds = selection.map(item => item.id)
        this.form.managerMethodDto = selection.map(item => item)[0]
        if (selection[0].eventDto != undefined) {
          // console.info("给riskUnitName赋值")
          this.$set(this.form, 'riskUnitName', selection.map(item => item.eventDto.sUnit.riskUnitName)[0])
        }
        this.$set(this.form, 'hiddenDanger', selection.map(item => item.hiddenDanger)[0])
      }
    },

    //用户表格
    userHandleSelectionChange(selection) {

      if (selection.length >= 1) {
        this.form.userName = selection.map(item => item.userName)
        this.form.userName = String(this.form.userName)
        // this.form.userId = selection.map(item => item.userId)
        this.form.userList = selection.map(value => {
          // this.form.userList.push(element)
          // console.info("--------------")
          // console.info(value)
          // console.info(index)
          // console.info(self)
          return value
        });
        // console.info(this.form.userList)
      }


    },
    closeManagermethodWindow() {
      if (this.managerMethodIds.length > 1) {
        this.$alert('请选择1条的数据', '提示', {
          confirmButtonText: '确定'

        });
        return
      }
      this.managerMethodWindow = false;
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList(this.queryParams);
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList(this.queryParams);
    },
    handleClose(done) {
      done()
      this.activeName = "first"
    }
  }
};
</script>
<style scoped>
.el-tag {
  margin: 7px;
}
</style>
